<template>
    <!--  vue3中template模板中可以有多个根节点-->
    <div>姓名:{{ nickName }}</div>
    <div>年龄:{{ age }}</div>
    <div>性别:{{ sex }}</div>
    <div>简介:{{introduce()}}</div>
</template>

<script lang='ts'>
export default{
  /**一、setup函数
   * 1、setup为组合式API提供了场所，组合式API要编写在setup函数中
   * 2、setup函数中可以定义变量，也可以定义方法，如果要在模板中访问到它
   * 必须要return才能访问
   * 3、setup和选项式API可以混用，谁在后面谁的优先级就高，但是我们不建议这么做
   * setup函数的写法的缺点
   * 1、每次都都需要将setup函数中的成员return出去，这样做很麻烦
   * 2、这种写法选项式API和组合式API可以混用，容易出现混乱现象
   * 这种写法实际上已经称为历史了，不建议这么使用了
   */
  setup(){
    let nickName:string="Giles"
    let age=39
    const introduce=()=>`我叫${nickName},我今年${age}岁`
    return{
      nickName,
      age,
      introduce
    }
  },
  data(){
    return{
      nickName:'zhaijizhe',
      sex:'男'
    }
  },
}
</script>

<style lang='scss' scoped>
</style>